<template>
	<view class="container">
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
			<view class="center">风险网格管理</view>
			<view class="right" @click="toggleSearch">
				<view v-if="isShowSearch">
					<uni-icons type="arrowup" size="20" color="#999"></uni-icons>
					<text>收起</text>
				</view>
				<view v-else>
					<uni-icons type="arrowdown" size="20" color="#999"></uni-icons>
					<text>展开</text>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="search" v-if="isShowSearch">
				<view class="item flex-row">
					<picker @change="changeConpany" :value="companyIndex" :range="companies" range-key="name">
						<view class="uni-input">{{ companies[companyIndex] ? companies[companyIndex].name : '' }}</view>
					</picker>
					<uni-icons type="arrowdown" size="20" color="#666"></uni-icons>
				</view>
				<view class="item icon-item">
					<view class="count flex-row">
						<text>风险总数：共{{ info.all || 0 }}处</text>
						<text>更新时间：{{ info.updatetime ? info.updatetime.split(' ')[0] : '' }}</text>
					</view>
					<view class="icons flex-row">
						<view @click="toggleLevel(1)" class="flex-column" :class="{active: levelIndex == 1}">
							<image src="../../../static/img/grid/risk_level_1.png"></image>
							<text>{{ info.one || 0 }}处</text>
						</view>
						<view @click="toggleLevel(2)" class="flex-column" :class="{active: levelIndex == 2}">
							<image src="../../../static/img/grid/risk_level_2.png"></image>
							<text>{{ info.two || 0 }}处</text>
						</view>
						<view @click="toggleLevel(3)" class="flex-column" :class="{active: levelIndex == 3}">
							<image src="../../../static/img/grid/risk_level_3.png"></image>
							<text>{{ info.three || 0 }}处</text>
						</view>
						<view @click="toggleLevel(4)" class="flex-column" :class="{active: levelIndex == 4}">
							<image src="../../../static/img/grid/risk_level_4.png"></image>
							<text>{{ info.four || 0 }}处</text>
						</view>
					</view>
				</view>
			</view>
			<scroll-view v-if="list.length" @scrolltolower="getNextPageData" scroll-y="true" class="scroll" :class="{full: !isShowSearch}">
				<view class="card" v-for="(item, index) in list" :key="index" @click="toPage(item.id)">
					<view class="title flex-row">
						<view class="name">风险点名称：{{ item.title }}</view>
					</view>
					<view class="item">
						<view>风险等级：{{ levels[item.level - 1] }}级</view>
						<view>风险地点：{{ item.position || '' }}</view>
						<view class="flex-row">
							<view class="people">责任人：{{ item.response }}</view>
							<view class="people">网格责任：{{ item.peopleNum }}人</view>
						</view>
						<view class="look flex-row">
							<text>巡检时间：{{ item.xunjianTime }}</text>
							<view class="flex-row">
								<text>查看</text>
								<uni-icons type="arrowright" size="16"></uni-icons>
							</view>
						</view>
					</view>
					<image v-if="item.level == 1" src="../../../static/img/grid/risk_level_1.png"></image>
					<image v-if="item.level == 2" src="../../../static/img/grid/risk_level_2.png"></image>
					<image v-if="item.level == 3" src="../../../static/img/grid/risk_level_3.png"></image>
					<image v-if="item.level == 4" src="../../../static/img/grid/risk_level_4.png"></image>
				</view>
				<view class="nodata">没有更多了~</view>
			</scroll-view>
			<view v-else class="nodata">没有更多了~</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default{
	components: { uniIcons },
	data(){
		return {
			isShowSearch: true,
			page: 1,
			total: 1,
			companies: [],
			companyIndex: 0,
			levelIndex: 1,
			levels: ['I', 'II', 'III', 'IV'],
			info: {},
			list: [],
			userId: uni.getStorageSync('userid'),
		}
	},
	onLoad(){
		this.doCompanyList();
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		// 详情
		toPage(id){
			uni.navigateTo({
				url: 'detail?id='+id
			})
		},
		// 切换搜索条件
		toggleSearch(){
			this.isShowSearch = !this.isShowSearch;
		},
		// 选择公司
		changeConpany(e){
			this.companyIndex = e.detail.value;
		},
		// 切换等级
		toggleLevel(index){
			this.page = 1;
			this.total = 0;
			this.list = [];
			this.levelIndex = index;
			this.getList();
		},
		// 处理公司列表
		doCompanyList(){
			let _this = this;
			let companyId = uni.getStorageSync('company');
			uni.request({
				url: _this.$API.getCompanyName,
				data: { company: companyId },
				header: _this.$API.get_head(),
				success: (res)=>{
					_this.companies = [{id: companyId, name: res.data.data.companyName}];
					_this.getList();
				}
			})
		},
		// 获取列表
		getList(){
			let _this = this;
			uni.request({
				url: _this.$API.riskGridManageList,
				data: {
					company: _this.companies[_this.companyIndex].id,
					level: _this.levelIndex,
					userid: _this.userId
				},
				header: _this.$API.get_head(),
				success: (res)=>{
					_this.info = res.data.data;
					
					// 判断是第一页还是后续页
					if(_this.page == 1){
						_this.list = res.data.data.list;
					}else{
						_this.list = _this.list.concat(res.data.data.list);
					}
				}
			})
		},
		// 分页加载
		getNextPageData(){
			this.page++;
			if(this.page < this.total){
				this.list();
			}
		}
	}
}
</script>

<style scoped>
.container{
	height: 100vh;
}
.status_bar{
	width: 100%;
	height: var(--status-bar-height);
	background: #fff;
}
.body{
	height: calc(100vh - var(--status-bar-height) - 88upx);
	background: #F0F0F0;
	padding: 20upx 20upx 0;
	box-sizing: border-box;
}

.scroll{
	height: calc(100% - 368upx);
}
.scroll.full{
	height: 100%;
}

/*卡片*/
.card{
	background: #fff;
	margin-bottom: 20upx;
	border-radius: 16upx;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
	position: relative;
}
.card image{
	width: 60upx;
	height: 70upx;
	position: absolute;
	top: 50upx;
	right: 30upx;
}
.card .item view .people{
	width: 50%;
}
.card .item .look{
	margin-top: 10upx;
	padding: 4upx 0 6upx;
	border-top: 2upx solid #F2F2F2;
}

/*检索条件*/
.search .item{
	height: 80upx;
	line-height: 80upx;
	background: #fff;
	border-radius: 10upx;
	margin-bottom: 16upx;
	padding: 0 12upx;
}
.search .item picker{
	width: 100%;
}
.search .item.icon-item{
	height: auto;
}
.search .item.icon-item .icons{
	width: 100%;
	box-sizing: border-box;
	padding: 20upx 40upx 50upx;
}
.search .item.icon-item .icons>view{
	position: relative;
}
.search .item.icon-item .icons>view::after{
	content: '';
	width: 0;
	height: 0;
	border-top: 30upx solid #BFBFBF;
	border-right: 24upx solid transparent;
	border-left: 24upx solid transparent;
	position: absolute;
	bottom: -30upx;
	left: 7upx;
}
.search .item.icon-item .icons>view.active::after{
	border-top: 30upx solid #1390E1;
}
.search .item.icon-item .count{
	padding: 12upx 30upx 0;
}
.search .item.icon-item image{
	width: 60upx;
	height: 70upx;
}
</style>
